<template>
	<view>
		
		
		
			<uni-nav-bar backgroundColor="#f2bed2" fixed="true" :status-bar="true" left-icon="back" color="#fff" :border="border" title="折扣列表" @clickLeft="back()"></uni-nav-bar>
			
	
		<!-- 	<view style="background-color: #f2bed2;" class="titleNview-placing"></view>
			<view style="background-color: #f2bed2;" class="topTitle">			
				<view style="padding-top: 8upx;" @click="back()">
					<image style="width: 40upx;height: 40upx;" src="/static/images/pt_lt.png" mode=""></image>
				</view>
				<view style="color: #fff;width: 200rpx;" class="fs22 Cfff">折扣列表</view> 
				<view class=""></view>
			</view> -->
			
		<view class="Banner">
			<view class="banner" v-if="Banner.length" style="margin-bottom: 20rpx;height:250rpx; overflow: hidden;">
				<swiper  class="swiper1" :circular="true" :indicator-dots="false" autoplay="true"  interval="2000" duration="500"	>					
					<swiper-item v-for="(item,index) in Banner" :key="index">
						<navigator v-if="item.adv_url" :url="item.adv_url"><image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image></navigator>
						<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
					</swiper-item>	
				</swiper>	
			</view>	
			
			<view class="top">
				<view @click="sortType(0)" :class="comprehensive  ? 'fe0000':''">综合排序</view>
				
				<view @click="sortType(1,0)" v-if="Sales==0">
					<text>销量</text>
					<image class="sjx" src="/static/images/sjx.jpg" mode=""></image>				
				</view>
				<view @click="sortType(1,1)" v-if="Sales==1">
					<text class="fe0000">销量</text>
					<image class="sjx" src="/static/images/sjx_sx.jpg" mode=""></image>				
				</view>
				<view @click="sortType(1,2)" v-if="Sales==2">
					<text class="fe0000">销量</text>
					<image class="sjx" src="/static/images/sjx_jx.png" mode=""></image>				
				</view>
				
				
				<view @click="sortType(2,0)" v-if="Price==0">
					<text>价格</text>
					<image class="sjx" src="/static/images/sjx.jpg" mode=""></image>									
				</view>
				<view @click="sortType(2,1)" v-if="Price==1">
					<text  class="fe0000">价格</text>
					<image class="sjx" src="/static/images/sjx_sx.jpg" mode=""></image>					
				</view>
				<view @click="sortType(2,2)" v-if="Price==2">
					<text  class="fe0000">价格</text>
					<image class="sjx" src="/static/images/sjx_jx.png" mode=""></image>					
				</view>
				<view  @click="flag=true;flag2=false;sai=2;">筛选</view>
			</view>
			
			<view class="ListBox ">
				<view class="Layout FlexBox">
						<view class="List" v-for="(item,index) in ListInfo" :key="index" @click="Navigato(item.goods_id)">
								<!-- <navigator url="'pages/distribution/shopInfo?goods_id='+item.goods_id"> -->
									<view class="Label">折扣</view>
									<view class="ImgBOx">
										<image :src="item.goods_image" mode="" class="spImg"></image>
										<view class="Discoun">{{item.xianshi_discount}}</view>
									</view>
									<view class="describe">
											{{item.goods_name}}
										<!-- 冬天内搭毛衣流行女秋冬内搭简约清新可爱风冬天内搭毛衣流行女秋冬内搭简约清新可爱风. -->
									</view>
									<view class="Info FlexBox">	
										<view class="Price">￥{{item.xianshi_price}}</view>
										<view class="Sales">销量:{{item.goods_salenum}}</view>
									</view>
								<!-- </navigator> -->
							</view>
						</view>
				</view>
		</view>
	
	
			<view  class="sxMask" v-if="flag" @click="Close()">
				<view class="innerMask" @click.stop="zhuzhi()">
					<view class="innerMaskTop flex_align flex">
						<view>筛选</view>
						<image src="@/static/images/sx.png" class="sxImage"></image>
					</view>
					
					
					<scroll-view class="scrollX" scroll-y="true" >
					<view class="innerMaskCenter">
						<view class="innerMaskCenterT flex_bettween flex">
							<text class="fl fs18 bold">品牌</text>
							<view class="fr fs18 C999 flex_align flex" >
								<view class="fs18 C999" @click="Allpinpai()">全部</view>
								<image class="xj" src="@/static/images/down.png"></image>
							</view>
							
						</view>
						<view class="pplis" :class="{'show':pinpai}">
							<text class="ppli" :class="{xuanze:filter1==index+1}" v-for="(item,index) in pinpaiList" :key='index' @click="brand(index,item.brand_id)">{{item.brand_name}}</text>
						</view>
						
						<view class="innerMaskCenterT mt flex_bettween flex">
							<text class="fl fs18 bold">商品分类</text>
							<view class="fr fs18 C999 flex_align flex" >
								<view class="fs18 C999" @click="AllClass()">全部</view>
								<image class="xj" src="@/static/images/down.png"></image>
							</view>
						</view>
						<view class="ppfllis" :class="{'show':aClass}">
							<text class="ppli" :class="{xuanze:filter2==index+1}" v-for="(item,index) in fenleiList" :key='index' @click="recommend_class(index,item.gc_id)">{{item.gc_name}}</text>				
						</view>
						
					</view>
						</scroll-view>
					
					
					<view class="innerMaskBottom">
						<button class="fl innerMaskBottom1" @click="chongzhi()">重置</button>
						<button class="fr innerMaskBottom2" @click="innerMask()">确定</button>
					</view>
				</view>
			</view>
	
	
	
			<view v-if="ListInfo.length<=0">
				<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
			</view>
		
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	
	const util = require("@/common/api_sign/request.js")
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				border:false,
				ListInfo:[],
				curpage:1,
				Banner:"",
				indicatorDots:false,
				circular:true,
				active1:0,
				active2:2,
				flag:false,
				Sales:0,
				Price:0,
				comprehensive:false,
				Repurchase:false,//控制筛选
				pinpaiList:[],
				fenleiList:[],
				UserInfo:[],
				filter1:0,
				brand_id:"",
				filter2:0,
				gc_id:"",
				ChangeList:"",
				num:"aaa",
				shi:0,
				fen:0,
				miao:0,
				allMiao:0,
				pinpai:false,
				aClass:false,
				TimeList:[],
				order_key:"",
				order_type:""
			
			}
		},
		onReachBottom() {
			if(this.curpage){
				this.GetList(true)
			}else{
				uni.showToast({
					title:'已是最后一页！',
					icon:'none'
				})
			}
		},
		onLoad() {
			this.GetList();
			this.getBanner();
			this.getClass();
			this.getbrand();
		},
		methods: {
			Allpinpai(){
				this.pinpai=!this.pinpai;
			},
			AllClass(){
				this.aClass=!this.aClass;
			},
			innerMask(){
				this.flag=false;
				this.GetList();
			},
			chongzhi(){
				this.filter1=0;
				this.filter2=0;
				this.brand_id="";
				this.gc_id="";
			},
			Close(){
				this.flag=false;
			},
			brand(index,brand_id){
				this.filter1=index+1;
				this.brand_id=brand_id;
			},
			recommend_class(index,gc_id){
				
				this.filter2=index+1
				this.gc_id=gc_id;
			},
			sortType(index,state){
				let that=this;
				that.brand_id="";
				that.gc_id="";
				that.curpage=1;
				if(index==0){
					that.comprehensive = true;
					that.Sales=0;
					that.Price=0;
					that.order_key="0";
					that.order_type="0";
					that.GetList();
				}
				if(index==1){//销量删选
					that.comprehensive = false;
					that.Price=0;
					if(state==0){
						that.Sales=1;
						that.order_key="1";
						that.order_type="0";
						that.GetList(1,0);
					}else if(state==1){
						that.Sales=2;
						that.order_key="1";
						that.order_type="1";
						that.GetList(1,1);
					}else if(state==2){
						that.Sales=1;
						that.order_key="1";
						that.order_type="0";
						that.GetList(1,0);
					}
				}
				if(index==2){//价格删选
					that.comprehensive = false;
					that.Sales=0;
					if(state==0){
						that.Price=1;
						that.order_key="2";
						that.order_type="0";
						that.GetList(2,0);
					}else if(state==1){
						that.Price=2;
						that.order_key="2";
						that.order_type="1";
						that.GetList(2,1);
					}else if(state==2){
						that.Price=1;
						that.order_key="2";
						that.order_type="0";
						that.GetList(2,0);
					}
				}	
			},
			zhuzhi(){},
			getbrand(){//获取品牌列表
				let that = this;
					this.$util.request({
						url: '/mobile/index.php?act=brand&op=index',
						method: 'get',
						data: {},
					}).then(function(res) {
						that.pinpaiList=res.datas
						console.log(res)
					})
			},
			getClass(){//获取分类列表
				var that=this		
				this.$util.request({
					url: '/mobile/index.php?act=index&op=recommend_class',
					method: 'get',
					data: {},
				}).then(function(res) {
					that.fenleiList=res.datas.list
				})
			},
			
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getBanner(){//获取广告列表
				this.$util.request({
					url: '/mobile/index.php?act=h5_adv&op=discountAdvList',
					method: 'get',
					data: {},
				}).then((res)=> {
					this.Banner=res.datas.adv_list
				})
			},
			Navigato(goods_id){
				uni.navigateTo({
					url:'/mall/goods/info?goods_id='+goods_id
				})
			},
			GetList(order_key="",order_type="",stat){//获取列表
			let that = this;
			util.request({
				// index.php?act=groupbuy&op=price_list
					url: '/mobile/index.php?act=xianshi&op=index',
					method: 'get',
					data: {
						curpage:that.curpage,
						order_key:that.order_key,
						order_type:that.order_type,
						gc_id:that.gc_id,
						b_id:that.brand_id
					},
				}).then(function(res) {
					// that.ListInfo=res.datas.xianshi_list;
					if(stat){
						that.ListInfo=that.ListInfo.concat(res.datas.xianshi_list) ;
					}else{
						that.ListInfo=res.datas.xianshi_list;
					}
					if(res.datas.paged.hasmore){
						that.curpage++;
					}else{
						that.curpage=false;
					}
				})
			},
		},
		
	}
</script>

<style>
	.Layout {
		margin: 0 15rpx;
		box-sizing: border-box;
	}
	.Banner image{
		width:100%;
		height: 250rpx;
	}
	.FlexBox{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.ListBox{
		margin-top: 30rpx;
	}
	.ListBox .List{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 350rpx;
		padding: 10rpx;
		position: relative;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	.ListBox .List .Label{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #ff4300;
		padding: 0 10rpx;
		border-top-left-radius: 10rpx;
		color: #FFFFFF;
	}
	.ListBox .List .spImg{
		width: 100%;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		height: 280rpx;

	}
	.ListBox .List .Discoun{
		background-color: #ff4300;
		text-align: center;
		color: #FFFFFF;
		margin-top: -20rpx;
	}
	.ListBox .List .describe{
		line-height: 30rpx;
		margin: 10rpx;
		height: 60rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		color: #000000;

		}
	.ListBox .List .Info .Price{
		color: #ff4300;
	}
	.ListBox .List .Info .Sales{
		color: #000000;
	}
	.uni-navbar__content_view text{
		height: 55upx !important;
	}
	.topTitle{
		display: flex;
		/* justify-content: space-between; */
		background-color: #ff4300;			
		padding-left: 20upx;
		padding-right: 20upx;
		padding-top: 18upx;
		padding-bottom: 10upx;
		align-items: center;
	}
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #f2bed2;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    /* background-color: #d7d3d5; */
	    background-color: #f2bed2; 
	    top: 0;  
	    z-index: 999;  
	}
	.topTitle{
		background-color: #FFFFFF;
		/* padding-top: 40upx; */
		padding-top: 40upx;
		padding-left: 20upx;
		padding-right: 20upx;
		padding-bottom: 27upx;
		border-bottom:1px solid #f2efef;
		/* border-radius: 15upx; */
	}
	.input{
		box-sizing: border-box;
		height: 77upx;
		padding: 13upx 30upx 0 20upx;
	}
	.input .input1{
		box-sizing: border-box;
		width: 618upx;
		height: 50upx;
		background-color: ;
		border-radius: 10upx;
		/* background: url(../../static/images/kj_search.jpg) 20upx center no-repeat,#efeff4; */
		background-size: 40upx 30upx;
		padding-left: 80upx;  
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
		align-items: center;
	}
	.top{
		box-sizing: border-box;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32upx;
	}
	.top>view{
		height: 80upx;
		line-height: 80upx;
		/* font-size: 21upx; */
		font-size:30upx;
		display: flex;
		align-items: center;
	}
	.top image{
		width: 35upx;
		height: 35upx;
	}
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.sxImage{
		width: 30upx;height: 30upx;margin-left: 15upx;
	}
	.arrImage{
		width: 36upx;height: 15upx;margin-left: 5upx;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 21upx
	}
	.innerMaskCenterT{
		height: 80upx;
		line-height: 80upx;
		padding: 0 28upx;
	}
	.xuanze{
		background-color: #ff4300 !important;
		color: #FFFEFF !important;
	}
	.scrollX{
		height: 1000rpx;
	}
	.pplis,.ppfllis{
		height: 130rpx;
		overflow: hidden;
	}
	.show{
		height: auto !important;
		overflow: overlay !important;
	}
	.pplis{
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		padding: 0 28upx;
		flex-wrap: wrap;
	}
	.ppli{
		margin: 8upx 10upx;
		padding: 5upx 0upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
		min-width: 29%;
		text-align: center;
		align-items: center;
	}
	.ppfllis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
		border-radius: 15upx;
	}
	.ppflli{
		margin-top: 20upx;
		padding: 5upx 40upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		display: flex;
		flex-wrap: nowrap;
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
		box-sizing: border-box;
	}
	.innerMaskBottom1{
	
		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	
	.jgInput{
		padding-left: 28upx;
		display: flex;
		flex-direction: row;
	}
	.jgInput input{
		border: none;
		border-radius: 5upx;
		text-align: center;
		background-color: #f0f2f5;
		width: 162upx;
		height: 43upx;
	}
	.inputC{
		position: relative;
		top: -5upx;
		padding: 0 15upx;
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.xj{
		margin-left: 8rpx;
		width: 24upx;
		height: 14upx;
	}
	.mt{
		margin-top: 20upx;
	}
</style>
